<template>
  <section class="num-statistic">
    <section class="inner">
      <section class="title">{{ title }}</section>
      <section class="num">
        <span>{{ num }}</span>
        <span class="per-unit">{{ perUnit }}</span>
      </section>
    </section>
  </section>
</template>
<script setup lang="ts">
defineProps<{
  title: string
  num: number
  perUnit: string
}>()
</script>
<style scoped>
.num-statistic {
  background-image: url('@/assets/imgs/dataAnalysis/left-top.png'), url('@/assets/imgs/dataAnalysis/left-bottom.png'),
    url('@/assets/imgs/dataAnalysis/right-top.png'), url('@/assets/imgs/dataAnalysis/right-bottom.png');
  background-position:
    top left,
    bottom left,
    top right,
    bottom right;
  background-repeat: no-repeat;
  outline: 3px solid #074290;
  padding: 2%;
}

.inner {
  background-color: #074290;
  text-align: center;
  padding: 5% 0;
}

.title {
  color: #01e3e6;
  font-size: 16px;
  font-family: 'Arial-400';
}

.num {
  color: white;
  font-size: 36px;
  font-family: 'Arial-bold';
  margin-top: 5%;
}

.per-unit {
  font-size: 14px;
  font-family: 'Arial-400';
}
</style>
